// components/Steps/index.tsx
import { View } from '@tarojs/components';
import React, { ReactNode } from 'react';
import Step, { StepProps } from './Step';
import './index.scss';

export type StepItem = Omit<StepProps, 'isLast' | 'isActive'>;

export interface StepsProps {
  children?: ReactNode;
  steps?: StepItem[];
  className?: string;
  onlyRight?: boolean;
  activeIndex?: number;
}

const PREFIX_CLS = 'm-steps';

interface StepsComponent extends React.FC<StepsProps> {
  Item: typeof Step;
}

const Steps: StepsComponent = ({
  children,
  steps = [],
  className,
  onlyRight = false,
  activeIndex = -1,
}) => {
  return (
    <View className={`${PREFIX_CLS} ${className || ''}`}>
      {steps.map((step, index) => (
        <Step
          {...step}
          key={index}
          isLast={index === steps.length - 1}
          onlyRight={onlyRight}
          isActive={index === activeIndex}
        />
      ))}
      {children}
    </View>
  );
};

Steps.Item = Step;

export default Steps;
